<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="推广设置" name="1">
        <RecommendSetting v-if="recommendShow"></RecommendSetting>
      </el-tab-pane>
      <el-tab-pane label="分享设置" name="2">
        <ShareSetting v-if="shareShow"></ShareSetting>
      </el-tab-pane>
      <el-tab-pane label="常见问题" name="3">
        <editor v-model="form.commonQuestion" :min-height="192" v-if="questionShow" />
        <el-button type="primary" style="margin-top: 20px" @click="handleSave">保存</el-button>
      </el-tab-pane>
      <el-tab-pane label="提现须知" name="4">
        <editor v-model="form.withdrawInstruction" :min-height="192" v-if="withdrawShow" />
        <el-button type="primary" style="margin-top: 20px" @click="handleSave">保存</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import RecommendSetting from './components/RecommendSetting';
  import ShareSetting from './components/ShareSetting';
  import { getDigitalPeopleInfo, saveDigitalPeopleInfo } from '@/api/shuiyin/shuiyin.js'
  export default {
    name: 'ExtendSetting',
    components: {
      RecommendSetting,
      ShareSetting,
    },
    data() {
      return {
        // 选项卡默认选中
        activeName: '1',
        isBoot: true,
        isOpen: false,
        form: {},
        questionShow: false, // 常见问题
        withdrawShow: false, // 提现须知
        shareShow: false, // 分享设置
        recommendShow: true, // 推广设置
      }
    },
    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        if (tab.name === '2') {
          this.shareShow = true;
          this.recommendShow = false;
          this.questionShow = false;
          this.withdrawShow = false;
        } else if (tab.name === '1') {
          this.recommendShow = true;
          this.shareShow = false;
          this.questionShow = false;
          this.withdrawShow = false;
        } else if (tab.name === '3') {
          this.questionShow = true;
          this.withdrawShow = false;
          this.recommendShow = false;
          this.shareShow = false;
          this.getInfo();
        } else if (tab.name === '4') {
          this.withdrawShow = true;
          this.shareShow = false;
          this.recommendShow = false;
          this.questionShow = false;
          this.getInfo();
        }
      },

      getInfo() {
        getDigitalPeopleInfo().then(response => {
          if (response.status === 200 && response.data) {
            this.form = {
              id: response.data.id,
              commonQuestion: response.data.commonQuestion,
              withdrawInstruction: response.data.withdrawInstruction
            }
          } else {
            this.form = {
              commonQuestion: '',
              withdrawInstruction: ''
            }
          }
        })
      },

      handleSave() {
        saveDigitalPeopleInfo(this.form).then(response => {
          this.$modal.msgSuccess('修改成功');
          this.getInfo();
        })
      }
    }
  }
</script>
